<template>
  <div>
    <el-card style="margin: 2vw;height: 86vh">
      <div class="down-card">
        <el-table :data="projectData.arr" stripe style="width: 100vw;" height="66vh" :key="Math.random()">
          <el-table-column prop="name" label="项目名称" width="120" />
          <el-table-column prop="type" label="类别" width="140" :formatter="showtype" />
          <el-table-column prop="background" label="背景" width="220" :show-overflow-tooltip="true" />
          <el-table-column prop="skills" label="所需技术" width="220">
            <template slot-scope="scope">
              <el-tag type="primary" v-for="item in projectData.arr[scope.$index].skills" :key="item.id">{{ item.name
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="120" :formatter="showStatus" />
          <el-table-column label="执行计划" align="center">
            <template #default="scope">
              <el-button @click="showPlan(scope.$index)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" @click="Change(scope.$index)">更新个人模块进度</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="pageIfo.page" :page-sizes="[5, 10, 15, 20]" :page-size="pageIfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="projectNum">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog title="执行计划" :visible.sync="dialogVisible" width="30%" style="border-radius: 20px">
      <el-row v-for="(item, index) in projectForm.plans" :key="index" style="margin-left: 0.5vw">
        <el-col>
          <el-form :inline="true" :model="projectForm.plans[index]" class="demo-ruleForm" ref="formInline">
            <el-form-item>
              <el-button type="info">阶段{{ projectForm.plans[index].num }}</el-button>
              &nbsp;
              <el-input :readonly="true" v-model="projectForm.plans[index].data" placeholder="请输入属性值"
                style="width: 15vw"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetProjectForm()">确 定</el-button>
      </span>
    </el-dialog>

    <div v-show="maskShow">
      <div class="mask"></div>

      <div class="main-card">
        <div class="form-card">
          <el-form :model="projectForm" :rules="rules" ref="projectForm" label-width="80px">
            <el-form-item label="项目名称" prop="name">
              <el-input v-model="projectForm.name" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="类别" prop="type">
              <el-select v-model="projectForm.type" placeholder="请选择项目类别" :popper-append-to-body="false">
                <el-option label="控制类" :value="0"></el-option>
                <el-option label="开发类" :value="1"></el-option>
                <el-option label="设计类" :value="2"></el-option>
                <el-option label="商务类" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目时间" required>
              <el-col :span="8">
                <el-form-item prop="date1">
                  <el-date-picker type="date" placeholder="选择日期" v-model="projectForm.date1" :append-to-body="false"
                    value-format="yyyy-MM-dd HH:mm"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col class="line" :span="2" style="width: 2vw">-</el-col>
              <el-col :span="8">
                <el-form-item prop="date2">
                  <el-date-picker type="date" placeholder="选择日期" v-model="projectForm.date2" :append-to-body="false"
                    value-format="yyyy-MM-dd HH:mm"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="背景" prop="background">
              <el-input type="textarea" v-model="projectForm.background"></el-input>
            </el-form-item>
            <el-form-item label="所需技术" prop="skills">
              <el-select v-model="projectForm.skills" multiple placeholder="请选择所需技术" :popper-append-to-body="false"
                style="width:26vw">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模块" prop="moduleDtos">
              <el-row v-for="(item, index) in projectForm.moduleDtos" :key="index" style="margin-left: 0.5vw">
                <el-col :span="16">
                  <el-form :inline="true" :model="projectForm.moduleDtos[index]" class="demo-ruleForm" ref="formInline">
                    <el-form-item>
                      <el-input v-model="projectForm.moduleDtos[index].name" placeholder="请输入模块名称"
                        style="width: 8vw"></el-input>
                      &nbsp;

                      <el-select v-model="projectForm.moduleDtos[index].data" multiple placeholder="请选择模块人员"
                        :popper-append-to-body="false" style="width:20vw">
                        <el-option v-for="item in storagePerson" :key="item.value" :label="item.name" :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="8">
                  <i class="el-icon-circle-plus-outline" type="danger" v-if="index == 0"
                    style="font-size: 30px; color: #67c23a; margin-right: 5px" @click="addmodule"></i>
                  <i class="el-icon-remove-outline" type="danger" v-if="index == 0"
                    style="font-size: 30px; color: #f56c6c" @click="delmodule()"></i>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item label="执行计划" prop="plans">
              <el-row v-for="(item, index) in projectForm.plans" :key="index" style="margin-left: 0.5vw">
                <el-col :span="16">
                  <el-form :inline="true" :model="projectForm.plans[index]" class="demo-ruleForm" ref="formInline">
                    <el-form-item>
                      <el-button type="info">阶段{{ projectForm.plans[index].num }}</el-button>
                      &nbsp;
                      <el-input v-model="projectForm.plans[index].data" placeholder="请输入阶段计划"
                        style="width: 15vw"></el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
                <el-col :span="8">
                  <i class="el-icon-circle-plus-outline" type="danger" v-if="index == 0"
                    style="font-size: 30px; color: #67c23a; margin-right: 5px" @click="addItem"></i>
                  <i class="el-icon-remove-outline" type="danger" v-if="index == 0"
                    style="font-size: 30px; color: #f56c6c" @click="del(index)"></i>
                </el-col>
              </el-row>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sureProject()">确定</el-button>
              <el-button @click="resetProjectForm('projectForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { proPagesApi, addProjectApi, VEPagesApi, VEProjectApi, ChangeApi, getInfoApi } from './apis.js';
export default {
  name: 'Dashboard',
  data() {
    return {
      input: '',
      maskShow: 0,
      num: 2,
      CorE: 0,
      dialogVisible: false,
      projectData: {
        arr: []
      },
      PersonInfo: {},
      pageIfo: { page: 1, pageSize: 10, name: '' },
      projectNum: 40,
      projectForm: {
        id: '',
        name: '',
        type: '',
        date1: '',
        date2: '',
        status: '',
        background: '',
        skills: [],
        plans: [{ data: '', num: 1 }],
        moduleDtos: [{ name: '', userIds: [] }],
      },
      stages: [],
      storagePerson: [],
      options: [{
        value: '547151851682922496',
        label: '测试'
      }, {
        value: '547151140454793216',
        label: '前端'
      }, {
        value: '547151501424984064',
        label: '后端'
      }, {
        value: '547151851582259200',
        label: '文档编写'
      }],
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' },],
        type: [{ required: true, message: '请选择项目类别', trigger: 'change' }],
        date1: [{ required: true, message: '请选择日期', trigger: 'change' }],
        date2: [{ required: true, message: '请选择日期', trigger: 'change' }],
        background: [{ required: true, message: '请输入项目背景', trigger: 'blur' }],
        skills: [{ required: true, message: '请选择技术', trigger: 'change' }],
        status: [{ required: true, message: '请选择项目状态', trigger: 'change' }],
        plans: [{ required: true, message: '请选择执行计划', trigger: 'change' }],
        moduleDtos: [{ required: true, message: '请添加模块', trigger: 'blur' }],
      },
      truetype: [
        {
          value: "0",
          label: "控制类",
        },
        {
          value: "1",
          label: "开发类",
        },
        {
          value: "2",
          label: "设计类",
        },
        {
          value: "3",
          label: "商务类",
        },
      ],
      trueStatus: [
        {
          value: "0",
          label: "项目启动可能性",
        },
        {
          value: "1",
          label: "已启动",
        },
        {
          value: "2",
          label: "已交付",
        },

      ],
    }
  },
  mounted() {
    this.getPersonInfo();
    this.getList();
  },
  methods: {
    Change(index) {
      // console.log(this.projectData.arr[index].id);
      ChangeApi({projectId: String(this.projectData.arr[index].id)}).then(res => {
        console.log(res);
      })
    },
    getPersonInfo(){
      getInfoApi().then(res => {
        console.log(res);
      })
    },
    showtype(row, column) {
      if (this.truetype) {//非空判断是为了避免循环的数组为null而产生报错
        var data = "";
        this.truetype.forEach((item, index) => {
          if (row.type == item.value) {
            data = item.label;
          }
        });
        return data;
      }
    },
    showStatus(row, column) {
      if (this.trueStatus) {//非空判断是为了避免循环的数组为null而产生报错
        var data = "";
        this.trueStatus.forEach((item, index) => {
          if (row.status == item.value) {
            data = item.label;
          }
        });
        return data;
      }
    },

    createProject() {
      createProjectApi({
        "background": "无",
        "beginTime": "2023-07-04 00:00",
        "finishTime": "2023-07-06 23:59",
        "moduleDtos": [
          // {
          //   "name": "前端",
          //   "userIds":  [547992038797344768]
          // }
        ],
        "name": "project1",
        "riskDtos": [
          // {
          //   "riskId": 548250416417210368,
          //   "sort": 1,
          //   "status": 1,
          //   "userId": 547152834089582592
          // }
        ],
        "skillIds": [
          547151140454793216
        ],
        "stages": "[\"stage1\",\"stage2\",\"stage3\"]",
        "status": 1,
        "type": 1
      }).then(res => {
        console.log(res);
      })
    },
    sureProject() {
      if (this.CorE === 0) {
        this.addProject();
      }
    },
    addProject() {
      this.projectForm.plans.forEach((item) => {
        this.stages.push(item.data);
      })
      addProjectApi({
        name: this.projectForm.name,
        type: this.projectForm.type,
        beginTime: this.projectForm.date1,
        finishTime: this.projectForm.date2,
        background: this.projectForm.background,
        skillIds: this.projectForm.skills,
        riskDtos: [],
        moduleDtos: [],
        stages: JSON.stringify(this.stages),
      }).then(res => {
        this.resetProjectForm('projectForm')
        this.getList();
      })
    },
    handleSizeChange(val) {
      this.pageIfo.page = 1;
      this.pageIfo.pageSize = Number(val);
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageIfo.page = Number(val);
      this.getList();
    },
    getList() {
      let that = this;
      that.projectData.arr = [];
      VEProjectApi({ page: this.pageIfo.page, size: this.pageIfo.pageSize }).then(res => {
        that.projectData.arr = res.data.content;
        that.projectNum = res.data.totalElements;
        that.projectData.arr.forEach(item => {
          item.stages = item.stages.replace(/\\/g, '');
          console.log(222);
        })
        console.log(that.projectData.arr);
      })
    },
    addItem() {
      // this.i += 1;
      this.projectForm.plans.push({
        date: '',
        num: this.num++,
      });
    },
    addmodule() {
      this.projectForm.moduleDtos.push({
        name: '',
        userIds: [],
      });
    },
    showPlan(index) {
      this.dialogVisible = true;
      this.projectForm.plans = this.projectData.arr[index].plans;
    },
    // 删除
    del() {
      if ((this.projectForm.plans.length - 1) != 0) {
        this.projectForm.plans.splice(this.projectForm.plans.length - 1, 1);
        this.num--;
      }
    },
    delmodule() {
      if ((this.projectForm.moduleDtos.length - 1) != 0) {
        this.projectForm.moduleDtos.splice(this.projectForm.moduleDtos.length - 1, 1);
      }
    },
    CMProject(res, index) {
      this.maskShow = 1;
      if (res === 1) {
        this.CorE = 1;
        this.projectForm.name = this.projectData.arr[index].name;
        this.projectForm.type = this.projectData.arr[index].type;
        this.projectForm.background = this.projectData.arr[index].background;
        this.projectForm.skills = this.projectData.arr[index].skills;
        this.projectForm.status = this.projectData.arr[index].status;
        this.projectForm.date1 = this.projectData.arr[index].date1;
        this.projectForm.date2 = this.projectData.arr[index].date2;
        this.projectForm.plans = this.projectData.arr[index].plans;
      }
      else {
        this.CorE = 0;
      }
    },
    resetProjectForm(formName) {
      this.maskShow = 0;
      formName && this.$refs[formName].resetFields();
      this.dialogVisible = false;
      this.projectForm = {
        name: '',
        type: '',
        date1: '',
        date2: '',
        status: false,
        background: '',
        plans: [{ data: '', num: 1 }],
        skills: [],
        moduleDtos: [{ name: '', userIds: [] }],
      };
    },
  },
  beforeDestroy() {

  },
  updated() {

  },
  components: {

  }
}
</script>

<style lang="scss">
.el-dialog {
  border-radius: 20px;
}
</style>

<style lang="scss" scoped>
.el-table {
  font-family: PR;
  /* 继承全局字体样式 */
}

.up-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.down-card {
  margin-top: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}


.mask {
  background-color: rgb(0, 0, 0);
  opacity: 0.3;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.main-card {
  width: 60vw;
  height: 80vh;
  position: fixed;
  background-color: #fff;
  border-radius: 20px;
  z-index: 10001;
  top: 10%;
  left: 20%;
  padding: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-card .form-card {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.main-card .form-card .line {
  text-align: scroll;
}

i:hover {
  cursor: pointer;
}

.main-card .form-card .line {
  text-align: center;
}
</style>
